import React, { useRef, forwardRef } from 'react'
class Test extends React.Component {
  render() {
    return <h1>test类组件</h1>
  }
}
// 注意: 函数组件上面不能写ref属性,如果使用forwardRef函数组件就可以写ref属性了.并且会把对应的ref对象传递到函数组件中
const Demo = forwardRef(function (props, ref) {
  console.log(ref, props)
  return <h1>demo函数组件</h1>
})
export default function App() {
  const ref1 = useRef()
  const refClass = useRef()
  const refFC = useRef('haha')
  return (
    <div>
      App
      <p ref={ref1}>123</p>
      <Test ref={refClass}></Test>
      <Demo ref={refFC} xxx={refFC}></Demo>
      <button
        onClick={() => {
          console.log(ref1.current) // 真实dom
          console.log(refClass.current) //组件实例
        }}
      >
        按钮
      </button>
    </div>
  )
}
